<template>
  <div>
    <van-nav-bar title="详情" left-text="返回" left-arrow v-back />
    <div class="order-detail__container">
      <div class="order-detail">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">账单</div>
          <!-- <div class="order-detail__title__phone" @click="phone">
            <van-icon name="phone-o"></van-icon>
          </div> -->
        </div>
        <div class="order-detail__content">
          <table class="bucket-count__table">
            <thead>
              <tr>
                <th>类型</th>
                <th>统计</th>
                <th v-for="item in backBuckets">{{item.bucketName}}</th>
                <th>合计</th>
                <th>说明</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="4">水桶账单</td>
                <td>还桶</td>
                <td v-for="item in billBuckets">{{item.repay}}</td>
                <td>{{repayTotal}}</td>
                <td>
                  <img width="24px" src="../../assets/img/i.png" @click="getInfo(0)">
                </td>
              </tr>
              <tr>
                <td>押桶</td>
                <td v-for="item in billBuckets">{{item.mortgage}}</td>
                <td>{{mortgageTotal}}</td>
                <td>
                  <img width="24px" src="../../assets/img/i.png" @click="getInfo(1)">
                </td>
              </tr>
              <tr>
                <td>欠桶</td>
                <td v-for="item in billBuckets">{{item.debt}}</td>
                <td>{{debtTotal}}</td>
                <td>
                  <img width="24px" src="../../assets/img/i.png" @click="getInfo(2)">
                </td>
              </tr>
              <tr>
                <td>存桶</td>
                <td v-for="item in billBuckets">{{item.deposit}}</td>
                <td>{{depositTotal}}</td>
                <td>
                  <img width="24px" src="../../assets/img/i.png" @click="getInfo(3)">
                </td>
              </tr>
              <tr>
                <td rowspan="4">金额账单</td>
                <td>还款</td>
                <td v-for="item in billBuckets">-</td>
                <td>{{allPrice.repayPrice}}元</td>
                <td>
                  <img width="24px" src="../../assets/img/i.png" @click="getInfo(4)">
                </td>
              </tr>
              <tr>
                <td>押金</td>
                <td v-for="item in billBuckets">-</td>
                <td>{{allPrice.mortgagePrice}}元</td>
                <td>
                  <img width="24px" src="../../assets/img/i.png" @click="getInfo(5)">
                </td>
              </tr>
              <tr>
                <td>欠款</td>
                <td v-for="item in billBuckets">-</td>
                <td>{{allPrice.debtPrice}}元</td>
                <td>
                  <img width="24px" src="../../assets/img/i.png" @click="getInfo(6)">
                </td>
              </tr>
              <tr>
                <td>存款</td>
                <td v-for="item in billBuckets">-</td>
                <td>{{allPrice.depositPrice}}元</td>
                <td>
                  <img width="24px" src="../../assets/img/i.png" @click="getInfo(7)">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="order-detail">
        <div class="order-detail__title">
          <div class="order-detail__title__tag"></div>
          <div class="order-detail__title__text">统计</div>
          <!-- <div class="order-detail__title__phone" @click="phone">
            <van-icon name="phone-o"></van-icon>
          </div> -->
        </div>
        <div class="order-detail__content">
          <table class="bucket-count__table">
            <thead>
              <tr>
                <th>类型</th>
                <th>统计</th>
                <th v-for="item in backBuckets">{{item.bucketName}}</th>
                <th>合计</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="2">总实收水数</td>
                <td>需回桶水数</td>
                <td v-for="item in receiptsBuckets">{{item.backBucket}}</td>
                <td>{{backBucketCount}}</td>
                <td>
                </td>
              </tr>
              <tr>
                <td>一次性水数</td>
                <td v-for="item in receiptsBuckets">{{item.noBackBucket}}</td>
                <td>{{noBackBucketCount}}</td>
                <td>
                </td>
              </tr>
              <tr>
                <td rowspan="4">总回桶数</td>
                <td>买桶</td>
                <td v-for="item in backBuckets">{{item.buy}}</td>
                <td>{{buyCount}}</td>
                <td>
                </td>
              </tr>
              <tr>
                <td>杂桶</td>
                <td v-for="item in backBuckets">{{item.exchange}}</td>
                <td>{{exchangeCount}}</td>
                <td>
                </td>
              </tr>
              <tr>
                <td>空桶</td>
                <td v-for="item in backBuckets">{{item.change}}</td>
                <td>{{changeCount}}</td>
                <td>
                </td>
              </tr>
              <tr>
                <td>赠桶</td>
                <td v-for="item in backBuckets">{{item.give}}</td>
                <td>{{giveCount}}</td>
                <td>
                </td>
              </tr>
              <tr>
                <td rowspan="2">押桶桶数</td>
                <td>押桶</td>
                <td v-for="item in mrtgageBuckets">{{item.mortgageHistory}}</td>
                <td>
                  {{mortgageHistoryCount}}
                </td>
              </tr>
              <tr>
                <td>还押桶</td>
                <td v-for="item in mrtgageBuckets">{{item.redemptionHistory}}</td>
                <td>
                  {{redemptionHistoryCount}}
                </td>
              </tr>
              <tr>
                <td rowspan="2">押桶金额</td>
                <td>押金</td>
                <td v-for="item in mrtgagePrices">{{item.mortgagePrice}}</td>
                <td>
                  {{mortgagePriceCount}}
                </td>
              </tr>
              <tr>
                <td>还押金</td>
                <td v-for="item in mrtgagePrices">{{item.redemptionPrice}}</td>
                <td>
                  {{redemptionPriceCount}}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    STATION_BILL_INFO
  } from '@/api/user';
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        allPrice: {
          repayPrice: 0,
          mortgagePrice: 0,
          debtPrice: 0,
          depositPrice: 0
        },
        backBuckets: [],
        billBuckets: [],
        mrtgageBuckets: [],
        mrtgagePrices: [],
        receiptsBuckets: []
      }
    },
    computed: {
      ...mapState(['stationInfo']),
      repayTotal() {
        let total = 0
        this.billBuckets.forEach(el => {
          total += el.repay
        })
        return total
      },
      mortgageTotal() {
        let total = 0
        this.billBuckets.forEach(el => {
          total += el.mortgage
        })
        return total
      },
      debtTotal() {
        let total = 0
        this.billBuckets.forEach(el => {
          total += el.debt
        })
        return total
      },
      depositTotal() {
        let total = 0
        this.billBuckets.forEach(el => {
          total += el.deposit
        })
        return total
      },

      backBucketCount() {
        let total = 0;
        this.receiptsBuckets.forEach(el => {
          total += el.backBucket;
        });
        return total;
      },
      noBackBucketCount() {
        let total = 0;
        this.receiptsBuckets.forEach(el => {
          total += el.noBackBucket;
        });
        return total;
      },
      buyCount() {
        let total = 0;
        this.backBuckets.forEach(el => {
          total += el.buy;
        });
        return total;
      },
      exchangeCount() {
        let total = 0;
        this.backBuckets.forEach(el => {
          total += el.exchange;
        });
        return total;
      },
      changeCount() {
        let total = 0;
        this.backBuckets.forEach(el => {
          total += el.change;
        });
        return total;
      },
      giveCount() {
        let total = 0;
        this.backBuckets.forEach(el => {
          total += el.give;
        });
        return total;
      },
      mortgageHistoryCount() {
        let total = 0;
        this.mrtgageBuckets.forEach(el => {
          total += el.mortgageHistory;
        });
        return total;
      },
      redemptionHistoryCount() {
        let total = 0;
        this.mrtgageBuckets.forEach(el => {
          total += el.redemptionHistory;
        });
        return total;
      },
      mortgagePriceCount() {
        let total = 0;
        this.mrtgagePrices.forEach(el => {
          total += el.mortgagePrice;
        });
        return total;
      },
      redemptionPriceCount() {
        let total = 0;
        this.mrtgagePrices.forEach(el => {
          total += el.redemptionPrice;
        });
        return total;
      },
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        this.$reqGet(STATION_BILL_INFO, {
          stationId: this.stationInfo.id
        }).then(res => {
          let {
            allPrice,
            backBuckets,
            billBuckets,
            mrtgageBuckets,
            mrtgagePrices,
            receiptsBuckets
          } = res.data;
          this.allPrice = allPrice;
          this.backBuckets = backBuckets;
          this.billBuckets = billBuckets;
          this.mrtgageBuckets = mrtgageBuckets;
          this.mrtgagePrices = mrtgagePrices;
          this.receiptsBuckets = receiptsBuckets;
        });
      },
      getInfo(index) {
        let info = {
          0: '还桶=历史每单存桶还历史欠桶数+历史存桶还历史每单欠桶数',
          1: '押桶=历史押桶总数-历史还押桶总数',
          2: '欠桶=历史欠桶-历史还桶',
          3: '历史总回桶数-历史需回桶水数=A；<br>判断A是否大于0；<br>' +
              '1、大于说明存桶，还押桶，还押桶数不超过A；<br>' +
              '2、小于说明欠桶，押桶，押桶数不超过A；<br>' +
              '3、等于说明平账，既不还押桶，又不押桶；',
          4: '还款=历史每单存款还历史欠款金额+历史存款还历史每单欠款金额',
          5: '押金=历史押金总金额-历史还押金总金额',
          6: '欠款=历史欠款-历史还款',
          7: '存款=历史存款'
        }
        this.$dialog.alert({
          title: '公式说明',
          message: info[index]
        })
      }
    }
  }

</script>

<style lang="less" scoped>
  @import '../../styles/variable.less';

  .order-detail__container {
    position: absolute;
    top: 46px;
    bottom: 0;
    width: 100%;
    background-color: #f5f5f5;
    overflow: auto;
  }



  .order-detail {
    border-radius: 5px;
    margin: 8px;
    padding: 10px 10px 5px 10px;
    background-color: #ffffff;
    margin-bottom: 10px;
    color: #666666;
  }

  .order-detail__title {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 8px;
    margin-bottom: 8px;

    .order-detail__title__tag {
      flex: 0 0 4px;
      height: 17px;
      margin-top: 2px;
      margin-right: 6px;
      background-color: @col-the;
    }

    .order-detail__title__phone {
      position: absolute;
      right: 5px;
      top: 2px;

      i {
        font-size: 18px;
      }
    }
  }


  .order-detail__count {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    border-top: 1px solid #f5f5f5;
    padding-top: 5px;
    font-size: 12px;

    .order-detail__count__discount {
      margin-right: 10px;
      margin-bottom: 2px;

      .price {
        color: @col-the;
      }
    }

    .order-detail__count__total {
      .price {
        font-size: 18px;
        color: @col-the;
      }

      .order-detail__count__total__del {
        font-size: 12px;
        color: #666;
      }
    }
  }


  .bucket-count__table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;

    thead>tr>th {
      padding: 5px 0;
      font-size: 14px;
    }

    tbody>tr>td {
      padding: 5px 0;
      font-size: 14px;
      border-bottom: 1px solid #f5f5f5;
    }
  }

</style>
